<template>
	<view class="addrecord_deta">

		<view class="add_rec" @click="goToNewPage">
			<view class="rec_top">
				<text></text>
				<text>尿酸值</text>
				<text></text>
			</view>
			<view class="rec_con">
				<text v-if="info.value">{{info.value}}</text>
			</view>
			<view class="rec_con_dw">
					umol/L
			</view>
			<view class="rec_con_bc">
				滑动标尺记录尿酸值
			</view>
		</view>
		<view class="ruler" @click="goToStatis">
			<scroll-choose @scroll="scroll" :scrollStart="scrollStart" :scrollEnd="scrollEnd" :scrollLeft="scrollLeft" :maginL="maginL"></scroll-choose>
			<view class="is_scroll">
			</view>
		</view>

		<!-- 测量时间 -->
		<view class="measuring_time">
			<view class="measuring_fl">测量时间</view>
			<view class="measuring_fr">
				<text>{{info.time}}</text> 
			</view>
		</view> 
		<!-- 时间段 -->
		<view class="blood_time">
			<view class="blood_time_item" @click="changeItem(index+1)" :class="index+1 == info.timeType? 'current_blood_item':''"
			 v-for="(item,index) in bloodTimeList" :key="index">{{item}}</view>
		</view>

		<!-- 状态 -->
		<view class="blood_state">
			<view class="blood_state_item" v-for="(v,i) in bloodStateList" :key="i" @click="changeBlood(v.type)">
				<image :src="v.img" mode=""></image>
				<text :class="info.type == v.type? 'current_blood_state':''">{{v.text}}</text>
			</view>
		</view>
		<image class="rec_img" v-show="info.img" :src="info.img" mode=""></image>
		<view class="addrecord_btn">
			<text @click="deleteAddrecord">删除</text>
			<!-- <text @click="preservation">保存</text> -->
		</view>

		<!-- 时间选择 -->
		<!-- <u-picker v-model="showTime" mode="time" @confirm="columnchange"></u-picker> -->
	</view>
</template>

<script>
	import scrollChoose from '@/components/scroll-choose/scroll-choose.vue'
	export default {
		components: {
			scrollChoose,
		},
		data() {
			return { 

				// 当前选中痛风发作情况
				currentStatusItem: -1,
				info: {},
				// 当前尿酸id
				id: null, 
				scrollLeftNow: 62, //页面显示
				scrollLeft: 10, //初始值
				scrollStart: 1, //滚动区域起始值
				scrollEnd: 20, //滚动区域终止值
				maginL: 15, //线间距 
				// 是否显示时间
				showTime: false, 
				// 添加/删除完成后跳转上一页
				goToPreviousTime: null,
				// 时间段选择
				bloodTimeList: ['空腹', '午餐前', '晚餐前', '睡前', '早餐后', '午餐后', '晚餐后', '凌晨'],
				// 当前时间段高亮
				currentBloodIndex: -1,
				// 状态
				bloodStateList: [{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/0.png',
						text: '无不适',
						type: 1
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/8.png',
						text: '三多',
						type: 2
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/3.png',
						text: '乏力',
						type: 3
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/7.png',
						text: '呕吐',
						type: 4
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/4.png',
						text: '呼吸快',
						type: 5
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/12.png',
						text: '眼下陷',
						type: 6
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/9.png',
						text: '头痛',
						type: 7
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/5.png',
						text: '昏迷',
						type: 8
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/1.png',
						text: '抽搐',
						type: 9
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/2.png',
						text: '出汗',
						type: 10
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/6.png',
						text: '饥饿',
						type: 11
					},
					{
						img: 'https://xcx.shuizhisu.com/public/static/img/nav/11.png',
						text: '心悸',
						type: 12
					},
				],
				// 当前状态高亮
				currentBloodStateIndex: -1,
			};
		},
		onLoad(option) { 
			option.info ? this.info = JSON.parse(option.info) : ''
			option.info ? this.scrollLeft = JSON.parse(option.info).value : ''
			// option.info ? this.timeType = JSON.parse(option.info).timeType : ''
			// option.info ? this.type = JSON.parse(option.info).type : ''
		},
		onHide() {
			clearTimeout(_this.goToPreviousTime)
		},
		methods: {
			// goToNewPage(){
			// 	uni.navigateTo({
			// 		url: '../recordnslist/index'
			// 	})
			// },
			// previousPage(){
			// 	uni.redirectTo({
			// 		url: '../index'
			// 	})
			// },
			goToRecordnslist() {
				let _this = this
				_this.$api.sendRequest({
					url: '/api/ua/rememberua',
					data: {
						time: _this.addTime,
						value: _this.value,
						mark: _this.mark,
						type: _this.type
					},
					success: res => {
						if (res.code >= 0) {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							clearTimeout(_this.goToPreviousTime)
							_this.goToPreviousTime = setTimeout(() => {
								uni.reLaunch({
									url: '../index'
								})
							}, 1000)
						}
					}
				})
			},
			// 时间段
			changeItem(type){
				this.info.timeType = type
			},
			// 状态
			changeBlood(type){
				this.info.type = type
			},
			
			goToStatis() {
				uni.redirectTo({
					// url: '../statistics/index'
				})
			},
			scroll(val) {
				this.value = val
				this.info.value = val
			},
			// 选中痛风状况
			currentStatus(index, type) {
				// this.currentStatusItem = index
				this.info.type = type
			},
			// 删除
			deleteAddrecord() {
				let _this = this
				_this.$api.sendRequest({
					url: 'api/glucose/delete',
					data: {
						id: _this.id
					},
					success: res => {
						if (res.code >= 0) {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							clearTimeout(_this.goToPreviousTime)
							_this.goToPreviousTime = setTimeout(() => {
								uni.redirectTo({
									url: '../bloodslist/index'
								})
							}, 1000)
						}
					}
				})
			},
			// 更新数据
			preservation() {
				let _this = this
				_this.$api.sendRequest({
					url: 'api/glucose/change',
					data: {
						id: _this.info.id,
						time: _this.info.time,
						value: _this.info.value,
						type: _this.info.type,
						timeType: _this.info.timeType
					},
					success: res => {
						if (res.code >= 0) {
							uni.showToast({
								title: '更新成功',
								icon: 'none'
							})
							clearTimeout(_this.goToPreviousTime)
							_this.goToPreviousTime = setTimeout(() => {
								uni.redirectTo({
									url: '../bloodslist/index'
								})
							}, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.addrecord_deta {
		overflow-x: hidden;

		.add_rec {
			padding: 20rpx 200rpx;
			height: 400rpx;
			background-color: #01cc97;

			.rec_top {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;

				& text:nth-child(1) {
					position: relative;
					top: 50%;
					transform: translate(0, -50%);
					width: 50rpx;
					height: 50rpx;
					background-color: #fff;
					border-radius: 50%;

					&::before {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						content: '-';
						font-size: 40rpx;
						color: #01cb9b;
					}
				}

				& text:nth-child(2) {
					flex: 1;
					color: #fff;
					text-align: center;
				}

				& text:nth-child(3) {
					position: relative;
					top: 50%;
					transform: translate(0, -50%);
					width: 50rpx;
					height: 50rpx;
					background-color: #fff;
					border-radius: 50%;

					&::before {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						content: '+';
						font-size: 40rpx;
						color: #01cb9b;
					}
				}

			}

			.rec_con {
				margin: 20rpx 0;
				height: 160rpx;
				line-height: 160rpx;
				font-size: 60rpx;
				text-align: center;
				background-color: #fff;
				border-radius: 10rpx;
			}

			.rec_con_dw {
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 36rpx;
				color: #fff;
			}

			.rec_con_bc {
				position: relative;
				top: -14rpx;
				right: 200rpx;
				width: 100vw;
				height: 80rpx;
				background-color: #999;
				opacity: .6;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
			}

		}
		.rec_img{
			margin: 20rpx 0 0 20rpx;
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
		.ruler {
			position: relative;
			height: 160rpx;
			.is_scroll{
				position: absolute;
				width: 100%;
				height: 160rpx;
				top: 0;
			}
		}
		.measuring_time{
			margin-top: 10rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			height: 100rpx; 
			background-color: #fff;
			.measuring_fl{
				color: #8a8a8a;
				line-height: 100rpx;
			} 
			.measuring_fr{
				line-height: 100rpx;
				.measuring_fr_img{
					position: relative;
					top: -6rpx;
					margin-left: 10rpx;
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
				}
			}
		}
		.blood_time {
			margin-top: 10rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 200rpx;
			background-color: #f8f8f8;

			.blood_time_item {
				margin-top: 10rpx;
				text-align: center;
				width: 23%;
				font-size: 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #fff;
				border-radius: 10rpx;
			}

			.current_blood_item {
				background-color: #ff8806;
				color: #fff;
			}
		}

		.blood_state {
			padding: 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 360rpx;
			background-color: #fff;

			.blood_state_item {
				width: 15%;
				color: #bfbfbf;
				text-align: center;

				image {
					display: block;
					margin: 0 auto 10rpx auto;
					width: 80rpx;
					height: 80rpx;
				}
			}

			.current_blood_state {
				color: #ff8806;
			}
		}

		.rec_status {
			margin-top: 30rpx;
			padding: 20rpx;
			background-color: #fff;

			.status_tit {
				display: block;
				height: 80rpx;
				font-size: 32rpx;
			}

			.status_con {
				display: flex;
				justify-content: space-between;
				height: 240rpx;

				.status_con_item {
					margin: 0 16rpx;
					flex: 1;
					display: flex;
					text-align: center;
					flex-direction: column;
					color: #999;

					.status_con_img {
						margin: 0 auto 20rpx auto;
						width: 80%;
						height: 100rpx;
					}
				}

				.show_status_item {

					// background-color: #eee;
					text {
						color: #01cc97;
					}
				}
			}
		}

		.addrecord_btn {
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			text-align: center;

			text {
				flex: 1;
				color: #fff;
				line-height: 80rpx;
				background-color: #01cb9b;
				border: 2rpx solid #01cb9b;
				border-radius: 10rpx;
			}

			& text:nth-child(1) {
				margin-right: 10rpx;
				background-color: #fff;
				color: #01cb9b;
			}

			& text:nth-child(2) {
				margin-left: 10rpx;
			}
		}

	}
</style>
